import * as d3 from "d3";
// 定义数据结构
// 定义数据结构

export function getSvg() {
  const data = [
    {
      label: "2020",
      season: [
        { label: "Q1", value: 300 },
        { label: "Q2", value: 220 },
        { label: "Q3", value: 80 },
        { label: "Q4", value: 400 },
      ],
    },
    {
      label: "2021",
      season: [
        { label: "Q1", value: 100 },
        { label: "Q2", value: 20 },
        { label: "Q3", value: 120 },
        { label: "Q4", value: 20 },
      ],
    },
    {
      label: "2022",
      season: [
        { label: "Q1", value: 100 },
        { label: "Q2", value: 20 },
        { label: "Q3", value: 120 },
        { label: "Q4", value: 20 },
      ],
    },
    {
      label: "2023",
      season: [
        { label: "Q1", value: 100 },
        { label: "Q2", value: 20 },
        { label: "Q3", value: 120 },
        { label: "Q4", value: 20 },
      ],
    },
  ];
  // 每年4个季度
  const seasonLen = 4;
  // 统计年的数量
  const yearLen = data.length;
  const colors = ["#5470C6", "#91CC75", "#fac858", "#ee6666"];

  const svgWidth = 960;
  const svgHeight = 500;

  // 定义图幅大小
  const margin = { top: 50, right: 50, bottom: 50, left: 50 };
  const chartWidth = svgWidth - margin.left - margin.right;
  const chartHeight = svgHeight - margin.top - margin.bottom;

  const svg = d3
    .create("svg")
    .attr("width", svgWidth)
    .attr("height", svgHeight);

  // 创建比例尺
  const xScale = d3
    .scaleBand()
    .domain(data.map((d) => d.label))
    .range([0, chartWidth])
    .padding(0.2);
  const yScale = d3
    .scaleLinear()
    .domain([
      0,
      d3.max(data, (d) => d3.max(d.season, (s) => s.value)) as number,
    ])
    .range([chartHeight, 0]);

  // 获取每个柱子的宽度
  const columWidth = xScale.bandwidth() / seasonLen;

  // 创建图表的根节点
  const chart = svg
    .append("g")
    .attr("transform", `translate(${margin.left},${margin.top})`);

  // 创建坐标轴
  chart
    .append("g")
    .attr("transform", `translate(0,${chartHeight})`)
    .call(d3.axisBottom(xScale).tickSizeOuter(0));
  chart.append("g").call(d3.axisLeft(yScale).tickSizeOuter(0));
  // 这里我们可以巧妙使用y轴刻度，因为本质就是line标签，修改x2的坐标值即可
  chart
    .selectAll(".y-axis .tick line")
    .filter((d, i) => i > 0)
    .attr("x2", svgWidth - margin.left - margin.right)
    .attr("stroke", "#aaa")
    .attr("stroke-width", 0.4);
  chart.select(".y-axis path").style("display", "none");

  // 创建group组，存不同年份的分组节点
  const group = chart
    .selectAll(".group")
    .data(data)
    .enter()
    .append("g")
    .attr("class", "group")
    .attr("transform", (d) => `translate(${xScale(d.label) + columWidth},0)`);

  // 在这些分组节点中，插入每个季度的rect节点
  group
    .selectAll("rect")
    .data((d) => d.season)
    .enter()
    .append("rect")
    .style("fill", (d, i) => colors[i])
    .attr(
      "x",
      (d) => columWidth * (["Q1", "Q2", "Q3", "Q4"].indexOf(d.label) - 1)
    )
    .attr("y", (d) => yScale(d.value))
    .attr("width", xScale.bandwidth() / seasonLen)
    .attr("height", (d) => chartHeight - yScale(d.value));
  return svg.node();
}
